<template>
  <div>
    <div class="header">
      <div class="icon-left" @click="goBack">
        <van-icon name="arrow-left" size="24" />
      </div>
      <div class="icon-right">
        <van-icon name="wap-home-o" size="24" />
      </div>
    </div>
    <Scroll class="content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item v-for="(item, index) in swiperImgUrl" :key="index">
          <img :src="item" alt="">
        </van-swipe-item>
      </van-swipe>
      <div class="shortname">
        <h2>{{ detailData.title }}</h2>
        <p>{{ detailData.describe }}</p>
        <van-divider />
      </div>
      <div class="price">
        <div>
          ￥<span>{{ detailData.price }}</span>/
          <span>100g</span>
        </div>
        <p>价格:<span style="text-decoration:line-through">￥139</span></p>
      </div>
      <div class="discount">优惠劵</div>
      <div class="service">
        <span>服务</span>
        <div class="success sl">
          <van-icon name="success" />
        </div>
        <span>满99元包邮</span>
        <div class="success sr">
          <van-icon name="success" />
        </div>
        <span>48小时发货</span>
        <span>...</span>
        <div class="right">
          <van-icon name="arrow" size="18" />
        </div>
      </div>
      <div class="detail-images">
        <h2>详情</h2>
        <div v-for="(item, index) in detailImgUrl" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </Scroll>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCartHandle" />
      <van-goods-action-button type="danger" text="立即购买" @click="submitGoods" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetailById } from '@/network/api/detail'
import Scroll from '@/components/common/Scroll.vue'
export default {
  name: 'detail',
  components: {
    Scroll
  },
  data() {
    return {
      id: 0,
      detailData: [],
      swiperImgUrl: [],
      detailImgUrl: []
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    addCartHandle() {
      this.$store.dispatch('cart/ADD_GOODS', this.id * 1)
    },
    submitGoods() {

    }
  },
  async created() {
    this.id = this.$route.params.id
    const res = await getDetailById(this.id)
    this.detailData = res.data[0]
    this.swiperImgUrl = res.data[0].swiperImgUrl.split('*')
    this.detailImgUrl = res.data[0].swiperImgUrl.split('*')
  },
}
</script>

<style lang='less' scoped>
.header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  color: #fff;
  opacity: 0.6;
  z-index: 9;

  .icon-left,
  .icon-right {
    width: 34px;
    height: 34px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
    margin: 6px;
    text-align: center;
  }

  .van-icon {
    margin-right: 2px;
    margin-top: 4px;
  }
}

.content {
  height: calc(100vh - 50px);

  .van-swipe {
    .van-swipe-item {
      height: 375px;

      img {
        height: 100%;
      }
    }
  }

  .shortname {
    padding: 10px 11px 0;
    background-color: #fff;

    h2 {
      font-size: 18px;
      line-height: 1.4;
      color: #232326;
      font-weight: normal;
      margin: 0;
    }

    p {
      font-size: 14px;
      color: #999;

    }

    .van-divider {
      margin: 0;
    }
  }

  .price {
    padding: 3px 11px 11px 11px;
    background-color: #fff;
    color: #949494;
    font-size: 14px;

    div {
      span:nth-child(1) {
        font-size: 30px;
        color: #D22531;
        margin-right: 5px;
      }

      span:nth-child(2) {
        margin-left: 5px;
      }
    }

    p {
      margin: 0;
      margin-top: 5px;
    }
  }

  .discount {
    margin-top: 10px;
    padding: 15px 0 15px 10px;
    font-size: 14px;
    background-color: #fff;
  }

  .service {
    display: flex;
    position: relative;
    background-color: #fff;
    height: 46px;
    font-size: 14px;
    color: #333;

    .success {
      position: absolute;
      width: 12px;
      top: 15px;
      height: 12px;
      padding: 1px;
      border-radius: 50%;
      border: 1px solid #333;
    }

    .sl {
      left: 60px;
    }

    .sr {
      right: 195px;
    }

    span {
      position: absolute;
      top: 15px;
    }

    span:nth-of-type(1) {
      left: 10px;
      color: #999;
    }

    span:nth-of-type(2) {
      left: 80px;
    }

    span:nth-of-type(3) {
      left: 185px;
    }

    span:nth-of-type(4) {
      right: 95px;
    }

    .right {
      position: absolute;
      top: 15px;
      right: 8px;
    }
  }

  .detail-images {
    background-color: #fff;
    padding: 0 10px;

    h2 {
      margin: 15px 0 10px 10px;
      font-size: 16px;
      font-weight: 700;
    }

    div {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
}
</style>